<template>
	<view class="promotion-banner">
		<view
			class="banner-item"
			v-for="item in promotions"
			:key="item.id"
			:style="{ background: item.bgColor }"
			@tap="onPromotionTap(item)"
		>
			<view class="banner-content">
				<view class="text-section">
					<text class="title">{{ item.title }}</text>
					<text class="subtitle">{{ item.subtitle }}</text>
					<view class="action-area">
						<text class="action-text">{{ item.actionText }}</text>
						<cl-icon name="arrow-right" size="16" color="#fff" />
					</view>
				</view>
			</view>
			<view class="banner-decoration">
				<view class="decoration-circle blur"></view>
				<view class="decoration-circle small blur"></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useCool } from "/@/cool";

const { router } = useCool();

// 促销活动数据
const promotions = reactive([
	{
		id: "1",
		title: "限时秒杀",
		subtitle: "全场秒杀，手慢无",
		actionText: "立即抢购",
		bgColor: "linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%)",
		image: "/static/empty/no.jpg",
		link: "/pages/market/promotion-list",
	},
]);

// 点击促销横幅
function onPromotionTap(item: any) {
	if (item.link) {
		router.push(item.link);
	}
}
</script>

<style lang="scss" scoped>
.promotion-banner {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	padding: 0 16rpx 24rpx 16rpx;
}

.banner-item {
	position: relative;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(80, 80, 120, 0.1);
	transition: box-shadow 0.3s, transform 0.2s;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	margin-bottom: 0;
	padding: 12rpx;
	&:active {
		transform: scale(0.97);
		box-shadow: 0 2rpx 8rpx rgba(80, 80, 120, 0.08);
	}
}

.banner-content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 24rpx 24rpx;
	z-index: 2;
}

.text-section {
	flex: 1;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.title {
	display: block;
	font-size: 36rpx;
	font-weight: 700;
	margin-bottom: 10rpx;
	letter-spacing: 1rpx;
	line-height: 1.2;
	text-shadow: 0 2rpx 8rpx rgba(80, 80, 120, 0.1);
}

.subtitle {
	display: block;
	font-size: 26rpx;
	opacity: 0.92;
	margin-bottom: 18rpx;
	font-weight: 400;
	line-height: 1.1;
}

.action-area {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-top: 2rpx;
}

.action-text {
	font-size: 24rpx;
	font-weight: 500;
	letter-spacing: 1rpx;
}

.image-section {
	width: 110rpx;
	height: 110rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(80, 80, 120, 0.1);
	background: rgba(255, 255, 255, 0.1);
}

.banner-image {
	width: 100%;
	height: 100%;
	border-radius: 16rpx;
	object-fit: cover;
	box-shadow: 0 2rpx 8rpx rgba(80, 80, 120, 0.08);
}

.banner-decoration {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.decoration-circle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.13);
	filter: blur(2rpx);
	&.blur {
		filter: blur(8rpx);
	}
	&:first-child {
		width: 120rpx;
		height: 120rpx;
		top: -40rpx;
		right: -40rpx;
	}
	&.small {
		width: 60rpx;
		height: 60rpx;
		bottom: -20rpx;
		right: 80rpx;
	}
}

@media (max-width: 500px) {
	.banner-item {
		height: 120rpx;
		border-radius: 14rpx;
	}
	.banner-content {
		padding: 12rpx 10rpx;
	}
	.title {
		font-size: 22rpx;
	}
	.subtitle {
		font-size: 16rpx;
	}
	.image-section {
		width: 54rpx;
		height: 54rpx;
		border-radius: 8rpx;
	}
	.banner-image {
		border-radius: 8rpx;
	}
}
</style>
